<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
        .box1 {
            width: 300px;
            height: 300px;
            padding: 100px;
            margin: 100px;
            position: relative;
            border: 100px solid #000;
            background-color: pink;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 10px;
            top: 10px;
        }
    </style>
	</head>
	<body>
		<div class="box1">
			<div class="box3">
				<div class="box2"style="left: 10px"></div>
			</div>
		</div>
		<script type="text/javascript">
			var box2 = document.getElementsByClassName("box2")[0];
			
			//offsetTop和offsetLeft
			console.log(box2.offsetLeft);
			console.log(box2.style.left);
			
			//一,最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置
				//offcetLeft如果父系盒子中都没有定位,以body为准.
				//style.left只能获取行内式,如果没有返回"";
				
			//二,offsetTop返回的是数字,而style.top返回的是字符串,除了数字外还带有单位px;
				// div.offsetLeft = 100;   div.style.left = "100px";
			//三,offsetTop 只读,而style.top可读写.(只读是获取值，可写是赋值)
				//style.left和style.top可以赋值
				//offsetLeft和offsetTop只能获取值
				
			//四,如果没有给HTML元素指定过top样式,则style.top返回的是空字符串
				//style.left只能获取行内式,如果没有返回"";
		</script>
	</body>
</html>
